<template>
  <Top />
  <div class="login">
    <div class="login-box">
      <div class="title fn32 text-center no-select">登&nbsp;&nbsp;&nbsp;录</div>
      <el-form
        ref="ruleFormRef"
        class="mt30"
        :model="ruleForm"
        :rules="rules"
        label-width="0px"
        size="default"
        status-icon
      >
        <el-form-item
          label=""
          prop="userid">
          <el-input
            v-model="ruleForm.userid"
            v-enter="() => handleLogin(ruleFormRef)"
            size="large"
            clearable
            placeholder="请输入用户名">
            <template #prefix>
              <span class="login-user"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label=""
          prop="userpw">
          <el-input
            v-model="ruleForm.userpw"
            v-enter="() => handleLogin(ruleFormRef)"
            size="large"
            clearable
            type="password"
            placeholder="请输入密码">
            <template #prefix>
              <span class="login-password"></span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item
          label=""
          class="flex"
          prop="code">
          <el-input
            v-model="ruleForm.code"
            v-enter="() => handleLogin(ruleFormRef)"
            size="large"
            class="w70"
            clearable
            placeholder="请输入验证码">
            <template #prefix>
              <span class="login-code"></span>
            </template>
          </el-input>
          <span 
            v-cloak 
            class="code"
            @click="getCode"
          >
            {{ code }}
          </span>
        </el-form-item>
        <el-form-item>
          <el-button
            v-blur
            v-enter="() => handleLogin(ruleFormRef)"
            :loading="loading"
            type="primary"
            class="w100"
            size="large"
            @click="handleLogin(ruleFormRef)"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Top from './top.vue'
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { login, type ILoginRes } from '@/api/login/index'
import { useRouter } from 'vue-router'
import { useUsersStore } from '@/stores/users'
const usersStore = useUsersStore()
const router = useRouter()
const ruleFormRef = ref<FormInstance>()
const loading = ref(false)
const ruleForm = reactive({
  userid: '',
  userpw: '',
  code: ''
})
const code = ref<number>()
const validateCode = (rule: any, value: any, callback: any) => {
  if (Number(value) !== code.value) callback(new Error('验证码不正确'))
  else callback()
}
const rules = reactive<FormRules>({
  userid: [{ required: true, message: '请输入用户名' }],
  userpw: [{ required: true, message: '请输入密码' }],
  code: [
    { required: true, message: '请输入验证码' },
    { validator: validateCode, trigger: 'blur' }
  ]
})

const getCode = () => {
  code.value = Math.floor(Math.random() * 8999 + 1000)
}
getCode()
const handleLogin = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(valid => {
    if (!valid) return
    loading.value = true
    login({
      trancode: 'SLogin',
      ...ruleForm
    }).then((res: ILoginRes) => {
      if(res.head.code !== '1') return ElMessage.error('账号或密码错误')
      usersStore.username = ruleForm.userid
      loading.value = false
      ElMessage.success('登录成功')
      router.push({
        path: '/bigScreen'
      })
    })
  })
}
</script>

<style lang="scss" scoped>
$color: #fff;
.login {
  background: url(@imgs/login-bg.png) center center no-repeat;
  background-size: cover;
  height: calc(100vh - 6.9rem);
  color: $color;
}
.login-box {
  padding-left: 60px;
  padding-right: 60px;
  width: 578px;
  height: 553px;
  background: url(@imgs/login-box.png) 0 0 no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.login-user {
  background: url(@imgs/login_user@2x.png) 0 0 no-repeat;
  background-size: 100%;
  width: 4.3rem;
  height: 4.3rem;
  margin-left: -14px;
  border-top-left-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  border-bottom-left-radius: var(--el-input-border-radius, var(--el-border-radius-base));
}
.login-password {
  background: url(@imgs/login_pwd@2x.png) 0 0 no-repeat;
  background-size: 100%;
  width: 4.3rem;
  height: 4.3rem;
  margin-left: -14px;
  border-top-left-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  border-bottom-left-radius: var(--el-input-border-radius, var(--el-border-radius-base));
}
.login-code {
  background: url(@imgs/login_code@2x.png) 0 0 no-repeat;
  background-size: 100%;
  width: 4.3rem;
  height: 4.3rem;
  margin-left: -14px;
  border-top-left-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  border-bottom-left-radius: var(--el-input-border-radius, var(--el-border-radius-base));
}
.w70 {
  width: 70%;
}
.code {
  width: calc(30% - 15px);
  margin-left: 15px;
  text-align: center;
  line-height: 43px;
  box-shadow: 0 0 0 1px rgba(41, 241, 250, 0.50);
  border-radius: 4px;
  letter-spacing: 5px;
  user-select: none;
  cursor: pointer;
}
.w30 {
  width: 30%;
}
:deep(.el-form) {
  width: 80%;
}
:root {
  --el-border-color: rgba(41, 241, 250, 0.50);
}
</style>
